import React, { memo, useState } from 'react';
import { SearchTabsWrapper } from './style';
import classNames from 'classnames';

const SearchTbas = memo((props) => {
  const { titles, tabClick } = props;
  const [currentIndex, setCurrentIndex] = useState(0);

  function itemClickHandle(index) {
    setCurrentIndex(index);
    if (tabClick) tabClick(index);
  }
  return (
    <SearchTabsWrapper>
      {titles.map((item, index) => (
        <div
          className={classNames('item', { active: currentIndex === index })}
          key={index}
          onClick={(e) => itemClickHandle(index)}
        >
          <span className="text">{item}</span>
          <span className="bottom"></span>
        </div>
      ))}
    </SearchTabsWrapper>
  );
});

export default SearchTbas;
